<template>
  <div>
    <el-card class="outer">
    <!--  页头+筛选栏-->
    <el-page-header @back="goBack" content="商品购买">
    </el-page-header>
    <el-form>
      <el-form-item label="商品分类">
        <el-radio-group v-model="type" @input="getDiffGoods">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">医药</el-radio>
          <el-radio :label="3">办公</el-radio>
          <el-radio :label="4">食品</el-radio>
          <el-radio :label="5">生鲜</el-radio>
          <el-radio :label="6">日化</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <!--  商品内容-->
    <el-row gutter="40">
      <el-col :span="6" v-for="(item,index) in goodsList" :key="index" style="margin-bottom: 20px;">
          <el-card  :body-style="{ padding: '0px' }" @click.native="Purchase(item.goodsId,item.money)" style="cursor:pointer;" >
            <img :src="item.goodsPicture" class="image" >
            <el-divider></el-divider>
            <div style="padding: 14px;">
              <h4 style="color: red;margin:0">{{item.money}}￥</h4>
              <span>{{ item.goodsName }}</span>
              <el-button type="text" class="button" @click="Purchase(item.goodsId,item.money)">购买</el-button>
            </div>
          </el-card>

<!--          购买对话框-->
        <el-dialog title="购买商品" :visible.sync="dialogFormVisible">
          <el-form :model="detailForm">
            <el-form-item label="购买数量" :label-width="formLabelWidth">
              <el-input-number v-model="detailForm.num" :min="1" :max="20" label="描述文字"></el-input-number>
            </el-form-item>
           </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="CreateDetail">确 定</el-button>
          </div>
        </el-dialog>

      </el-col>
    </el-row>
  </el-card>
  </div>
</template>

<script>
import recommend from "../components/recommend";
import {getGoodsInfo,getGoodsByClass,saveGoodsDetail} from "@/api";

export default {
  name: "Shopping",
  components:{recommend},
  data(){
    return{
      formLabelWidth:'120px',
      dialogFormVisible:false,
      type:1,
      goodsList:[],
      detailForm:{
        num:0,
        money:0,
        goodsId:'',
        account:'',
        status:'正在配送'
      },
      imgHeight: 0,
      temp:{
        goodsId:0,
        money:0,
      }

    }
  },
  methods:{
    goBack(){
      this.$router.back();
    },
    Purchase(goodsId,money){
      this.dialogFormVisible=true
      this.temp.goodsId=goodsId
      this.temp.money=money
    },
    //商品分类查询
    getDiffGoods(value){
      let calss
      switch (value){
        case 1:break;
        case 2:calss='医药';break;
        case 3:calss='办公';break;
        case 4:calss='食品';break;
        case 5:calss='生鲜';break;
        case 6:calss='日化';break;
      }
      getGoodsByClass({
        "goodsClass":calss
      }).then(res=>{
        if(value!==1){
          this.goodsList=res.data
        }else{
          this.getAllGoods()
        }
      })
    },
    //获取全部商品信息
    getAllGoods(){
      getGoodsInfo().then(res=>{
        // console.log(res.data)
        this.goodsList=res.data
      })
    },
    //创建订单
    CreateDetail(){
      this.detailForm.account = this.GLOBAL.account
      this.detailForm.money=this.detailForm.num*this.temp.money
      this.detailForm.goodsId=this.temp.goodsId
      saveGoodsDetail({
        "account":this.detailForm.account,
        "goodsId":this.detailForm.goodsId,
        "money": this.detailForm.money,
        "number": this.detailForm.num,
        "status": "正在配送"
      }).then(res=>{
        // console.log(res)
        if(res.status===200){
          this.$message.success('购买成功')
        }
      })
      this.dialogFormVisible = false
    }

  },



  created() {
    this.getAllGoods()
  }
}
</script>

<style scoped>
.outer{
  margin: 20px 100px 20px 100px
}
.el-form{
  margin-top: 10px;
  margin-bottom: 0;
}
.el-divider{
  margin-top: 10px;
  margin-bottom: 10px;
  bottom: 10px;
}
.shopCard{
  margin-left: 10px;
  margin-right: 10px;
}
img {
  width: 100%;
  height: 300px;
}
</style>
